import React, {Component} from 'react'
import {
    View,
    Text,
    StyleSheet,
    Image
} from 'react-native'

import HttpUtils from './HttpUtils'

export default class FetchDemo extends Component {
    constructor(props) {
        super(props);
        this.result;
        this.state = {
            newsList: ''
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}
                      onPress={() => {
                          fetch('http://api.tianapi.com/social/?key=861a794733dd2b057e415d822bef9586&num=3')
                              .then(response => response.json())
                              .then(result => {
                                  this.result = result.newslist;
                                  this.setState({
                                      newsList: result.newslist[0]
                                  });
                                  console.log("--------->" + this.result.length);
                                  console.log("--------->" +this.state.newsList.title);
                              })
                              .catch(error => {

                              })
                      }}
                >
                    FetchDemo
                </Text>

                <Text style={styles.text}
                      onPress={() => {
                          HttpUtils.get('http://api.tianapi.com/social/?key=861a794733dd2b057e415d822bef9586&num=1')
                              .then(result => {
                                  result.json
                              })
                              .then((jsonData) => {

                              })
                              .catch(error => {
                              })
                      }}
                >
                    FetchDemo
                </Text>

                <View style={{flexDirection: 'row', alignItems: 'center', height: 60}}>

                    <View>
                        <Image
                            style={{width: 30, height: 30}}
                            source={require('./../images/home.png')}
                        />
                    </View>

                    <View
                        style={{marginLeft: 10, marginRight: 10, height: 40, width: 2, backgroundColor: 'red'}}
                    />

                    <View style={{flex: 1}}>
                        <Text style={{alignSelf: 'center', color: 'black'}}>
                            {this.state.newsList.description}
                        </Text>
                        <View
                            style={{backgroundColor: 'gray', height: 2}}
                        />
                        <Text>
                            {this.state.newsList.title}
                        </Text>
                    </View>

                </View>

                <Text style={styles.result}>
                    返回结果:
                </Text>

                <View style={styles.rec}/>

            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    text: {
        backgroundColor: 'gray',
        fontSize: 20,
        color: 'red',
        textAlign: 'center'
    },
    result: {
        fontSize: 20,
        color: 'black'
    },
    rec: {
        height: 120,
        width: 120,
        backgroundColor: 'white',
        elevation: 20,
        shadowOffset: {width: 20, height: 20},
        shadowColor: 'red',
        shadowOpacity: 1,
        shadowRadius: 10
    },

})